<template>
  <div class="add-school-view">
    <ContentField>
      <template v-slot:header> 学校录入 </template>
      <template v-slot:body>
        <el-form ref="form" :model="newSchool" label-width="80px" style="">
          <el-alert
            title="必填项"
            type="error"
            :closable="false"
            style="width: 300px; margin-left: 80px"
          >
          </el-alert>
          <br />
          <el-form-item label="所在省市">
            <el-select
              v-model="newSchool.pid"
              placeholder="请选择对应的省"
              @change="getCitiesByPid"
            >
              <el-option
                v-for="province in provinces"
                :label="province.name"
                :value="province.id"
                :key="province.id"
              ></el-option>
            </el-select>
            <el-select
              v-model="newSchool.cid"
              placeholder="请选择对应的城市"
              style="padding-left: 20px"
            >
              <el-option
                v-for="city in cities"
                :label="city.name"
                :value="city.id"
                :key="city.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学校名称" style="width: 400px">
            <el-input v-model="newSchool.name"></el-input>
          </el-form-item>
          <el-form-item label="学校地址" style="width: 600px">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              placeholder="请输入内容"
              v-model="newSchool.address"
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="subNewSchoolInfo"
              >点击提交信息</el-button
            >
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </template>
    </ContentField>
  </div>
</template>

<script>
import ContentField from "../../components/ContentField.vue";
export default {
  name: "AddSchoolView",
  components: {
    ContentField,
  },
  created() {
    this.getProvinces();
  },
  methods: {
    getProvinces() {
      this.newSchool.cid = "";
      let outer = this;
      this.$store.dispatch("getProvinces", {
        token: this.$store.state.user.jwt_token,
        success(resp) {
          outer.provinces = resp.data.data;
        },
        error(resp) {
          console.log(resp);
        },
      });
    },
    getCitiesByPid() {
      let outer = this;
      this.newSchool.cid = "";
      this.$store.dispatch("getCitiesByPid", {
        pid: this.newSchool.pid,
        token: this.$store.state.user.jwt_token,
        success(resp) {
          outer.cities = resp.data.data;
        },
        error(resp) {
          console.log(resp);
        },
      });
    },
    subNewSchoolInfo() {
      let outer = this;
      this.$store.dispatch("addNewSchool", {
        school: this.newSchool,
        token: this.$store.state.user.jwt_token,
        success(resp) {
          if (resp.data.code == 200) {
            outer.$message({
              type: "success",
              message: "添加学校成功",
            });
            outer.newSchool = {};
          } else {
            outer.$message.error("添加学校失败：" + resp.data.message);
          }
        },
        error(resp) {
          console.log(resp);
        },
      });
    },
  },
  data() {
    return {
      newSchool: {
        pid: "",
        cid: "",
        name: "",
        address: "",
      },
      provinces: [],
      cities: [],
    };
  },
};
</script>

<style scoped></style>
